import React, {useEffect, useState} from 'react';
import axios from 'axios'

function Child() {
    useEffect(()=>{
        console.log('挂载：componentDidMount')
        return ()=>{
            console.log('卸载：componentWillMount')
        }
    },[])
    return (
        <div>Child</div>
    )
}

function App(props) {
  const [userList,setUserList] = useState([])
    const [isLoading,setIsLoading] = useState(false)
    const [isShow,setIsShow] = useState(true)
    const getUser = async ()=>{
      setIsLoading(true)
      const res = await axios.get('https://api.github.com/search/repositories?q=react&sort=stars')
        setUserList(res.data.items)
        setIsLoading(false)
    }
    useEffect(()=>{
                getUser()

              },[])

    return (
        <div>
            <button onClick={()=>setIsShow(!isShow)}>显示与隐藏</button>
            {
                isShow && <Child/>
            }
            <hr/>
            {
                isLoading?  <h3>玩命加载中......</h3>:userList.map(user=>(
                    <p key={user.id}>{user.full_name}</p>
                ))
            }


        </div>
    );
}

export default App;